<!DOCTYPE html> 
<html style=""><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Component</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="../../themes/default/nex.css">
        <link rel="stylesheet" href="../../themes/default/scroller/scroller.css">
        <link rel="stylesheet" href="../asset/css/style.css">
        
        <script src="../../boot.js"></script>
        <script src="../asset/js/jquery.min.js"></script>
        <script type="text/javascript">
		 $(function(){
			$(scrollerCt).scroll(function(e){
				//console.log(e);	
			});
			require([
				'Nex/scroller/Scroller'
			], function(scroller){ 
				sbar = scroller.create({
					el : scrollerCt,
					hideToRemove : true,
					wheelDir : 'v',
					hideScrollBarFn : function(el , cb){
						el.fadeOut(500, cb)	
					},
					//animateScroll : true,
					hideScrollBarTrack : true,
					onScrollLeftEnd : function(x, y){
						console.log(x, y);	
					},
					onScrollTopEnd : function(x, y){
						console.log(x, y);	
					},
					vScrollBarFaceHeight : 20,
					vScrollBarTopEdge : 2,
					vScrollBarRightEdge : 2,
					hScrollBarLeftEdge : 2,
					hScrollBarBottomEdge : 2,
					//hScrollBar : false,
					barSize : 2,
					//autoWrapper : true,
					enableOverlay : true,	
					wheelStep : 50
				});
				sbar2 = scroller.create({
					el : scrollerCt2,
					wheelDir : 'h',
					//animateScroll : true,
					hideScrollBarTrack : true,
					onScrollLeftEnd : function(x, y){
						console.log(x, y);	
					},
					onScrollTopEnd : function(x, y){
						console.log(x, y);	
					},
					vScrollBarFaceHeight : 20,
					vScrollBarTopEdge : 2,
					vScrollBarRightEdge : 2,
					hScrollBarLeftEdge : 2,
					hScrollBarBottomEdge : 2,
					//hScrollBar : false,
					//barSize : 2,
					//autoWrapper : true,
					enableOverlay : true,	
					wheelStep : 1000
				});
			 });	
			
			var t = 0; 
			var width = 100;
			setInterval(function(){
				
				if( t > 5 ) {
					$(scrollerCt).find('p').last().remove();	
					$(content).width( $(content).width() - 100 );
				} else {
					$(scrollerCt).append('<p>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>');	
					$(content).width( $(content).width() + 100 );
				}
				
				t++;
				
				if( sbar ) {
					sbar.updateScrollBar();
				}
			},100) 
		 });
		 </script>
         <style type="text/css">
			.nex-scroller-wrapper {
				position:relative;
			}
			.nex-scrollbar {
				position:absolute;	
			} 
			.nex-scrollbar-track,
			.nex-scrollbar-face {
				position:absolute;
				z-index:1;
			}
			
			.nex-scrollbar-track {
				background: rgb(51, 51, 51);
				opacity: 0.2;	
			}
			.nex-scrollbar-face {
				background: rgb(0, 0, 0);
				opacity: 0.4;
			}
			
			.nex-scrollbar-face {
				z-index:2;
			}
			
			.nex-vscrollbar-track {
				height:100%;	
			}
			.nex-hscrollbar-track {
				width:100%;	
			}
			
			.nex-vscrollbar-track,
			.nex-vscrollbar-face {
				width:100%;
				top:0px;
			}
			
			.nex-hscrollbar-track,
			.nex-hscrollbar-face {
				height:100%;
				left:0px;
			}
			
			.nex-vscroll-wrap {
				top:0;
				height:100%;
				right:0px;
				z-index:1;
				background: rgb(51, 51, 51);
				opacity: 0.2;
			}
			.nex-hscroll-wrap {
				bottom:0;
				width:100%;
				left:0px;
				z-index:1;
				background: rgb(51, 51, 51);
				opacity: 0.2;
			}
			.nex-vscroll-bar {
				top:0;
				height:6px;
				right:0px;
				z-index:2;
				background: rgb(0, 0, 0);
				opacity: 0.4;
			}
			.nex-hscroll-bar {
				bottom:0;
				width:6px;
				left:0px;
				z-index:2;
				background: rgb(0, 0, 0);
				opacity: 0.4;
			}
		</style>
    </head>
    <body style="">
    
    <div id="pp" style="position:absolute; right:100px; top:100px; width:200px; height:200px; border:5px solid red; padding:10px;">
    	<div style="asdfadf" id="pos">23</div>
    </div>
    
    <div class="scoller-wrap" style="position:relative; margin-top:50px; width:500px; border:1px solid red; ">
        	<div id="scrollerCt" class="scroller-container" style=" padding:10px; margin:10px; border:10px solid green; background:#F5F5F5; height:300px; ">
            	<div style="width:900px;" id="content">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
             
              
                <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
            </div>
            <!--<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
            <div class="slimScrollBar" id="scrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 65.9824px; background: rgb(0, 0, 0);"></div>-->
        </div>
    
    <div class="scoller-wrap" style="position:relative; margin-top:50px; width:500px; border:1px solid red; ">
        	<div id="scrollerCt2" class="scroller-container" style=" padding:10px; margin:10px; border:10px solid green; background:#F5F5F5; height:300px; ">
            	<div style="width:900px;" id="content2">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
             
              
                <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
            </div>
            <!--<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
            <div class="slimScrollBar" id="scrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 65.9824px; background: rgb(0, 0, 0);"></div>-->
        </div>
     
    </body>
</html>
